<template>
  <div>
    <el-table
      ref="table"
      element-loading-text="Loading"
      :data="tableData"
      tooltip-effect="dark"
      :row-key="rowKey"
      style="width: 100%"
      stripe
      border
      :show-header="showHeader"
      class="card-table"
      :height="tableHeight"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="55"
        align="center"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="65"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableLabel"
        :width="item.width ? item.width : ''"
        :key="index"
        :align="item.align ? item.align : 'center'"
        :label="item.label"
        :prop="item.param"
      >
        <!--                是否有多级表头-->
        <template v-if="item.children && item.children.length">
          <el-table-column
            v-for="(item, index) in item.children"
            :width="item.width ? item.width : ''"
            :key="index"
            :align="item.align ? item.align : 'left'"
            :label="item.label"
            :prop="item.param"
          ></el-table-column>
        </template>

<!--        <template slot-scope="scope">-->
<!--          <span v-if="item.link">-->
<!--            <el-button type="text" @click="handle(scope.row, scope.$index)">{{-->
<!--              scope.row[item.param]-->
<!--            }}</el-button>-->
<!--          </span>-->
<!--        </template>-->
        <template slot-scope="scope">
          <span v-if="item.param != 'operate'">
            <span v-if="item.render">{{
              item.render(scope.row, scope.$index)
            }}</span>
            <a
              style="cursor: pointer; color: #34c4d0"
              v-else-if="item.link"
              @click="handleLink(item.click, scope.row, scope.$index)"
              >{{ scope.row[item.param] }}</a
            >
            <span v-else>{{ scope.row[item.param] }}</span>
          </span>
          <div v-if="item.param === 'operate'" class="operate-btn">
            <el-button
              v-for="(i, idx) in item.operate"
              :style="{ color: i.color ? i.color : '' }"
              :class="i.className"
              :key="idx"
              :type="i.type ? i.type : 'button'"
              :icon="i.icon ? i.icon : ''"
              @click="handleButton(i.click, scope.row, scope.$index)"
              size="small"
            >
              {{ i.label }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="f-pagination">
      <el-pagination
        v-show="pager.total > 0"
        style="text-align: right"
        background
        :page-sizes="[10, 15, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pager.currentPage"
        :page-size.sync="pager.pageSize"
        :hide-on-single-page="false"
        layout="total, prev, pager, next,jumper"
        :total="pager.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    btnRules: {
      type: Function,
      default: () => {
        return true;
      },
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableOption: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    showIndex: {
      type: Boolean,
      default: false,
    },
    rowKey: {
      type: String,
      default: "id",
    },
    pager: {
      type: Object,
      default: function () {
        return {
          currentPage: 1,
          pageSize: 10,
          total: 0,
        };
      },
    },
    tableHeight: {
      type: Number,
    },
    showHeader: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handle(row, index) {
      this.$emit("handle", row, index);
    },
    handleButton(method, row, index) {
      this.$emit("handleButton", method, row, index);
    },
    handleLink(method, row, index) {
      this.$emit("handleLink", method, row, index);
    },
    getAllSelections() {
      return this.$refs.table.selection;
    },
    handleSelectionChange(selection) {
      this.$emit("handleSelectionChange", selection);
    },
    handleSizeChange(val) {
      this.pager.currentPage = 1;
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    tableOperateRules(item, row) {
      if (item.rulesName && this.$parent["tableOperateRules"]) {
        return this.$parent["tableOperateRules"](item.rulesName, row);
      } else {
        return this.btnRules(item.rulesName, row);
      }
    },
  },
};
</script>
<style scoped>
::v-deep .app-index .el-pagination__sizes {
  position: static;
}

::v-deep .el-table th {
  height: 46px;
  background: #ebeef4;
  font-size: 14px;
  color: #3e4855;
  font-weight: normal;
}
</style>
<style lang="less">
.f-pagination {
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgba(0, 158, 142, 1);
    border: 1px solid rgba(0, 158, 142, 1);
    border-radius: 2px;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: #fff;
    border: 1px solid #e7f0ef;
    border-radius: 2px;
    color: #666;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    min-width: 26px;
  }

  .el-pager li,
  button.btn-prev,
  button.btn-next {
    height: 26px;
    line-height: 26px;
  }

  .el-pagination__editor.el-input {
    width: 34px;
  }

  .el-pagination__editor.el-input .el-input__inner {
    height: 24px;
    line-height: 24px;
  }

  .el-pagination button,
  .el-pagination span:not([class*="suffix"]) {
    font-size: 12px;
    color: #999;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    margin: 0 3px;
  }
}
.el-table {
  color: #c6d3ec;
}
.el-table th.el-table__cell {
  background: #202f3e;
  color: #34c4d0;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #41596f;
}
.el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #41596f;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: #41596f;
}
.el-table th.el-table__cell > .cell {
  font-size: 18px;
}
.el-table .el-table__cell {
  padding: 10px 0 !important;
}
.el-table tr:nth-child(2n-1) {
  background-color: rgba(32, 47, 62, 0.7);
}
.el-table__body tr:nth-child(2n) {
  background-color: #202f3e;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #202f3e;
}
.card-table {
  background-color: #011c29;
  border: 1px solid #3e517c;
  font-size: 20px;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #263c44;
}
.el-table .cell {
  font-size: 17px;
}
.operate-btn {
  .el-button:focus,
  .el-button:hover {
    color: #fff;
    background-color: #41596f;
    border-color: #41596f;
  }
  .el-button {
    color: #fff;
    background-color: #247382;
    border-color: #247382;
    padding: 4px 20px !important;
    font-size: 18px;
  }
}
.el-pager li {
  font-size: 14px !important;
}
.el-pagination .btn-next,
.el-pagination .btn-prev,
.el-pagination .el-pager li {
  color: #c6d3ec !important;
  background-color: transparent !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #40e5f0 !important;
  background-color: transparent !important;
}
.f-pagination .el-pagination.is-background .el-pager li:not(.disabled).active {
  border: none;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover,
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: transparent !important;
}
.f-pagination .el-pagination.is-background .btn-next,
.f-pagination .el-pagination.is-background .btn-prev,
.f-pagination .el-pagination.is-background .el-pager li {
  border: none;
}
.f-pagination .el-pagination button,
.f-pagination .el-pagination span:not([class*="suffix"]) {
  font-size: 14px !important;
  color: #e7f5f6 !important;
}
.f-pagination .el-pagination__editor.el-input {
  width: 50px;
}
.el-pagination__editor {
  .el-input__inner {
    color: #fff;
    background-color: #202f3e;
    border-color: #40e5f0;
    height: 32px;
    line-height: 30px;
  }
}
.f-pagination .el-pagination__editor.el-input .el-input__inner {
  height: 28px;
}
.f-pagination {
  margin-top: 15px;
}
</style>
